<template>
  <n-layout has-sider>
    <n-layout-sider class="ui-menu" width="200">
      <Menu />
    </n-layout-sider>
    <n-layout>
      <n-layout-header class="ui-header">
        <Header />
      </n-layout-header>
      <n-layout-content class="ui-main">
        <router-view></router-view>
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<script setup>
import Header from '../components/layout/Header.vue';
import Menu from '../components/layout/Menu.vue';
</script>

<style lang="scss" scoped>
.ui-menu {
  min-height: 100vh;
  background-color: #001428;
  color: #fff;
}
.ui-header {
  height: 50px;
  border-bottom: 1px solid #ddd;
}
.main-page-box {
  height: calc(100vh - 50px);
  overflow: auto;
}
.ui-main{
  padding: 10px;
}
</style>